@extends('admin.layouts.app')
@section('css')
 
@endsection
@section('content')
<div class="row">
	<div class="col-sm-12">
    <div id="map" style="height: 500px;">
    	
    </div>
	</div>
</div>
                        

                        



						


                        
 @endsection                        

   @section('js')                 

       
       <script type="text/javascript">
       	var map,markers = [];;
      function initMap() 
      {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -37.8134183, lng: 144.9612273},
          zoom: 11
        });

       
        @foreach($list as $v)
        var lnglat = '{{$v->lnglat}}'.split(',');
       	var lat    = Number(lnglat[1]);
       	var lng    = Number(lnglat[0]);
        var point = {lat:lat,lng:lng};
         console.info(point);
        addMarker(point);
        @endforeach
        
      }

      function addMarker(lnglat)
      {
        
        var marker = new google.maps.Marker({
          position: lnglat,
          map: map,
          //title: 'Hello World!'
        });

        markers.push(marker);
      }

      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }


      function clearMarkers()
      {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers()
      {
        setMapOnAll(map);
      }

      function deleteMarkers()
      {
        clearMarkers();
        markers = [];
      }
     
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvV2Y133IAiy0BQcY4zcLM2bQ_44I2dJ0&callback=initMap"
    async defer></script>

       

        
		
		

		
		
  @endsection    